<template>
    <div class="hore-edit">
       <h3>编辑英雄</h3>
    <hr />
    <form class="form-horizontal" @submit.prevent="editHore()">
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄名称</label>
        <div class="col-sm-10">
          <input v-model="horeForm.horeName" type="text" class="form-control" style="width:200px" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄性别</label>
        <div class="col-sm-10">
          <input v-model="horeForm.gender" type="radio" value="男" /> 男
          <input v-model="horeForm.gender" type="radio" value="女" /> 女
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">编辑</button>
        </div>
      </div>
    </form>
    </div> 
</template>
<script>
export default {
    data(){
        return {
            horeForm : {
                horeName: "",
                gender: ""
            }
        };
    },
    created () {
        this.getHore();
    },
    methods:{
        getHore () {
            //  this.$route.params.id 是地址栏上的ID
            this.$http.get('/hore/' + this.$route.params.id)
            .then((res)=>{
                this.horeForm = res.data;
            })
        },
        editHore () {
            const { horeName, gender,id } = this.horeForm 
            
            // console.log(id);
            
            this.$http.put('/hore/' + id,{
                horeName, gender, time: new Date()
            }).then(()=>{
                // 修改成功
                this.$router.push('/hore')
            })
        }
    }
}
</script>